<template>
    <el-form-item label="抖音达人" prop="title">
        <el-radio-group v-model="createform.audience.awemeRadio" size="small" @change="changeAudience">
            <el-radio-button label="1">不限</el-radio-button>
            <el-radio-button label="2">自定义</el-radio-button>
        </el-radio-group>
        <el-form-item label="" :prop="`audience.tiktokAllCheck`" v-if="createform.audience.awemeRadio==2" key="tiktokAllCheck">
            <div class="cascader_box">
                <div class="flexbox flexcenter">
                    定向与以下达人产生
                    <el-select multiple collapse-tags v-model="createform.audience.aweme_fan_behaviors" placeholder="" size="small" style="margin:0 12px;width:208px" @change="changeAwemeFan">
                        <el-option :label="item.name" :value="item.id" v-for="(item,index) in behaviorsList" :key="index"></el-option>
                    </el-select>
                    互动的用户，时间范围取
                    <el-select @change="sessionSave" v-model="createform.audience.aweme_fan_behaviors_days" placeholder="" size="small" style="margin:0 12px;width:100px">
                        <el-option :label="item.name" :value="item.id" v-for="(item,index) in behaviorsDays" :key="index"></el-option>
                    </el-select>
                </div>
                <div style="margin-top:15px" class="flexbox flexcenter">
                    <span class="font_14 color_01">达人分类搜索：</span>
                    <el-cascader v-model="createform.audience.tiktokTypeVal" ref="tiktokType" filterable size="small" class="flex" collapse-tags :options="createform.audience.tiktokTypeOption" :props="{multiple:true,label:'value',value:'id'}" @change="tiktokTypeCheck" style="width:330px">
                    </el-cascader>
                </div>
                <div style="margin-top:15px" class="flexbox flexcenter">
                    <span class="font_14 color_01">抖音达人搜索：</span>
                    <el-input placeholder="支持搜索达人、抖音昵称" @change="remoteMethodTitok" clearable class="flex" size="small" prefix-icon="el-icon-search" v-model="createform.audience.titokQuery">
                    </el-input>
                </div>
                <div class="flexbox flexbetween" style="margin-top:16px">
                    <div class="cascader_left">
                        <div class="cas_header2 flexbox flexcenter">
                            <el-tabs v-model="createform.audience.recomentRadio" class="tab_style">
                                <el-tab-pane label="添加达人分类" name="CLASS"></el-tab-pane>
                                <el-tab-pane label="添加抖音达人" name="TITKOT"></el-tab-pane>
                            </el-tabs>
                        </div>
                        <div v-if="createform.audience.recomentRadio=='CLASS'" key="CLASS">
                            <div class="cas_header flexbox flexcenter">
                                达人分类
                            </div>
                            <div class="cas_center over_box flexbox" v-loading="titokLoadding" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.2)">
                                <el-cascader-panel class="tiktok_cascader" ref="tiktokType" :key="titokResh" v-model="createform.audience.tiktokTypeVal" :options="createform.audience.tiktokTypeOption" :props="{multiple:true,label:'value',value:'id'}" @change="tiktokTypeCheck">
                                    <template slot-scope="{ node, data }">
                                        <div @click="getTiktokData(node)">
                                            <div class="font_14 color_01">{{data.value}}</div>
                                            <div class="font_13 color_02" style="margin-top:5px">粉丝数量{{data.fans_num_str}}</div>
                                        </div>
                                    </template>
                                </el-cascader-panel>
                            </div>
                            <div class="tiktok_text">
                                <el-link :underline="false" type="primary" @click="getRecomendList" v-if="createform.audience.category_id">查看{{createform.audience.category_text}}推荐抖音达人</el-link>
                            </div>
                        </div>
                        <div v-if="createform.audience.recomentRadio=='TITKOT'" key="TITKOT">
                            <div class="flexbox flexcenter" style="height:56px;padding:0 12px">
                                <el-cascader ref="titokTalentRef" v-model="createform.audience.category_id" :options="createform.audience.tiktokTypeOption" @change="changeTitokTalent" :props="{label:'value',value:'id',emitPath:false}" size="small" style="width:100%"></el-cascader>
                            </div>
                            <div v-loading="talentLoadding" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.2)">
                                <div class="over_box" style="height:243px">
                                    <el-checkbox-group v-model="createform.audience.titokTalentVal" class="talent_check" @change="checkTitokTalent">
                                        <el-checkbox :label="item.label_id" v-for="(item,index) in createform.audience.titokTalentList" :key="index" @change="checkTitokChild(item)">
                                            <div class="flex flexbox flexcenter" style="min-width:0">
                                                <img :src="item.avatar" class="talent_head" alt="">
                                                <div class="talent_info flex">
                                                    <div class="talent_name">{{item.author_name}}（ID: {{item.label_id}}）</div>
                                                    <div class="talent_fans flexbox flexcenter">
                                                        <span>粉丝：{{item.total_fans_num_str}}</span>
                                                        <span class="has_checked_line"></span>
                                                        <span>分类：{{item.category_name}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="cascader_right">
                        <div class="cas_header2 flexcolumn flexbox flexjust">
                            <div class="flexbox flexcenter flexbetween">
                                <div>还可添加 <el-link :type="30 - createform.audience.tiktokAllCheck.length>0?'primary':'danger'" :underline="false">{{30 - createform.audience.tiktokAllCheck.length }}</el-link> 个</div>
                                <el-link type="primary" :underline="false" @click="clearTalentNode('tiktokType')">清空</el-link>
                            </div>
                            <div style="margin-top:5px">
                                <span class="talent_12">达人分类：{{createform.audience.tiktokTypeCheck.length}}</span>
                                <span class="talent_12">抖音达人：{{createform.audience.titokTalentText.length}}</span>
                            </div>
                        </div>
                        <div class="cas_header flexbox flexcenter">
                            <span class="flex">内容</span>
                            <span class="flex">预估覆盖数</span>
                        </div>
                        <div class="has_talent_box over_box" style="height:260px">
                            <div class="has_talent_item flexbox flexcenter" v-for="(item,index) in createform.audience.tiktokAllCheck" :key="index">
                                <div class="has_talent_name flex">{{item.name}}</div>
                                <div class="has_talent_num flex flexbox flexbetween">
                                    <span>{{item.cover}}</span>
                                    <el-link :underline="false" icon="el-icon-close" @click="deletTiktokCheck(item,index)"></el-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-form-item>
    </el-form-item>
</template>

<script>
export default {
    props: ["createform","titokResh","talentLoadding","titokLoadding"],
    name: "",
    data() {
        return {
            behaviorsList: [
                {
                    id: "FOLLOWED_USER",
                    name: "关注",
                },
                {
                    id: "COMMENTED_USER",
                    name: "评论",
                },
                {
                    id: "LIKED_USER",
                    name: "点赞",
                },
                {
                    id: "SHARED_USER",
                    name: "分享",
                },
                {
                    id: "LIVE_WATCH",
                    name: "观看",
                },
                {
                    id: "LIVE_EFFECTIVE_WATCH",
                    name: "有效观看",
                },
                {
                    id: "LIVE_COMMENT",
                    name: "直播评论",
                },
                {
                    id: "LIVE_EXCEPTIONAL",
                    name: "打赏",
                },
                {
                    id: "LIVE_GOODS_CLICK",
                    name: "商品点击",
                },
                {
                    id: "LIVE_GOODS_ORDER",
                    name: "商品下单",
                },
                {
                    id: "GOODS_CARTS_CLICK",
                    name: "购物车点击",
                },
                {
                    id: "GOODS_CARTS_ORDER",
                    name: "购物车下单",
                },
            ],
            behaviorsDays: [
                {
                    id: "",
                    name: "无",
                },
                {
                    id: "DAYS_15",
                    name: "近15天",
                },
                {
                    id: "DAYS_30",
                    name: "近30天",
                },
                {
                    id: "DAYS_60",
                    name: "近60天",
                },
            ],
        };
    },
    created() {},
    methods: {
        getAwemecategory(){
            this.$emit("getAwemecategory")
        },

        getRecommendedTalent(){
            this.$emit("getRecommendedTalent")
        },

        remoteMethodTitok(){
            this.$emit("remoteMethodTitok")
        },

        // 切换抖音达人
        changeAudience() {
            if (this.createform.audience.awemeRadio == 2) {
                this.getAwemecategory();
            }
            this.sessionSave();
        },

        // 已选抖音用户行为类型
        changeAwemeFan() {
            if (this.createform.audience.aweme_fan_behaviors.length == 0) {
                this.createform.audience.aweme_fan_behaviors = [
                    "FOLLOWED_USER",
                ];
            }
            if(this.createform.audience.aweme_fan_behaviors.length==1&&this.createform.audience.aweme_fan_behaviors[0]=='FOLLOWED_USER'){
                this.createform.audience.aweme_fan_behaviors_days = ''
            }else{
                this.createform.audience.aweme_fan_behaviors_days = 'DAYS_15'
            }
            this.getAwemecategory();
        },

        // 达人分类选择
        tiktokTypeCheck() {
            this.createform.audience.recomentRadio = "CLASS";
            this.$nextTick(() => {
                let CheckedNodes = this.$refs.tiktokType.getCheckedNodes();
                let checkText = [];
                CheckedNodes = CheckedNodes.filter(
                    (option) => !(option.parent && option.parent.checked)
                );
                for (let i in CheckedNodes) {
                    checkText.push({
                        name: CheckedNodes[i].data.value,
                        id: CheckedNodes[i].data.id,
                        fans: CheckedNodes[i].data.fans_num_str,
                        cover: CheckedNodes[i].data.cover_num_str,
                    });
                }
                this.createform.audience.tiktokTypeCheck = checkText;
                this.createform.audience.tiktokAllCheck =
                    this.createform.audience.tiktokTypeCheck.concat(
                        this.createform.audience.titokTalentText
                    );
                this.sessionSave();
            });
        },

        // 点击获取达人分类节点
        getTiktokData(node) {
            this.createform.audience.category_text = node.label;
            this.createform.audience.category_id = node.value;
            this.sessionSave();
        },

        // 查看推荐抖音达人
        getRecomendList() {
            this.createform.audience.recomentRadio = "TITKOT";
            this.getRecommendedTalent();
        },

        // 选择抖音达人分类
        changeTitokTalent() {
            this.createform.audience.titokQuery = "";
            this.getRecommendedTalent();
        },

        //选择抖音达人列表
        checkTitokTalent() {
            let arr = [];
            for (let i in this.createform.audience.titokTalentVal) {
                for (let a in this.createform.audience.titokTalentText) {
                    if (
                        this.createform.audience.titokTalentVal[i] ==
                        this.createform.audience.titokTalentText[a].id
                    ) {
                        arr.push({
                            name: this.createform.audience.titokTalentText[a]
                                .name,
                            id: this.createform.audience.titokTalentText[a].id,
                            fans: this.createform.audience.titokTalentText[a]
                                .fans,
                            cover: this.createform.audience.titokTalentText[a]
                                .cover,
                        });
                    }
                }
            }
            this.createform.audience.titokTalentText = arr;
            this.createform.audience.tiktokAllCheck =
                this.createform.audience.tiktokTypeCheck.concat(
                    this.createform.audience.titokTalentText
                );
            this.sessionSave();
        },

        //选择抖音达人子元素
        checkTitokChild(item) {
            for (let i in this.createform.audience.titokTalentVal) {
                if (
                    this.createform.audience.titokTalentVal[i] == item.label_id
                ) {
                    this.createform.audience.titokTalentText.push({
                        name: item.author_name,
                        id: item.label_id,
                        fans: item.total_fans_num_str,
                        cover: item.cover_num_str,
                    });
                }
            }
            this.sessionSave();
        },

        // 抖音达人删除
        deletTiktokCheck(item, index) {
            let a = this.createform.audience.tiktokTypeVal.filter((it) => {
                if (!it.includes(item.id)) {
                    return it;
                }
            });
            let b = this.createform.audience.titokTalentVal.filter((it) => {
                if (it != item.id) {
                    return it;
                }
            });
            let c = this.createform.audience.tiktokTypeCheck.filter((it) => {
                if (it.id != item.id) {
                    return it;
                }
            });
            let d = this.createform.audience.titokTalentText.filter((it) => {
                if (it.id != item.id) {
                    return it;
                }
            });
            this.createform.audience.tiktokTypeVal = a;
            this.createform.audience.titokTalentVal = b;
            this.createform.audience.tiktokTypeCheck = c;
            this.createform.audience.titokTalentText = d;
            this.createform.audience.tiktokAllCheck.splice(index, 1);
            this.sessionSave();
        },

        // 清空已选
        clearTalentNode(refs) {
            this.createform.audience.tiktokTypeVal = [];
            this.createform.audience.titokTalentVal = [];
            this.createform.audience.tiktokTypeCheck = [];
            this.createform.audience.titokTalentText = [];
            this.createform.audience.tiktokAllCheck = [];
            this.sessionSave();
        },

        sessionSave() {
            this.$emit("sessionSave");
        },
    },
    components: {},
};
</script>


<style scoped>
</style>

